<template>
  <div class="shopCertificateManagement">
    <!-- form -->
    <div class="formBox">
      <el-form
        :inline="true"
        :model="requestData"
        ref="searchForm"
        label-position="left"
      >
        <el-form-item label="品类：" prop="cascaderValue">
          <el-cascader
            v-model="cascaderValue"
            :options="productCate"
            :props="{ checkStrictly: true }"
            filterable
            clearable
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="录入状态：" prop="recordType">
          <el-select v-model="requestData.recordType" clearable>
            <el-option
              v-for="entry in entryStatusTypeOption"
              :key="entry.value"
              :label="entry.label"
              :value="entry.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称：" prop="name">
          <el-input v-model="requestData.name" />
        </el-form-item>

        <el-form-item label="编辑人：" prop="editor">
          <el-input v-model="requestData.editor" />
        </el-form-item>
        <el-form-item label="商品代码：" prop="code">
          <el-input v-model.number="requestData.code" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="searchHandle"
            >查询</el-button
          >
          <el-button size="mini" @click="resetHandle('searchForm')"
            >重置</el-button
          >
          <el-button type="primary" size="mini" @click="batchDownload"
            >下载</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        border
        :data="tableData"
        v-loading="tableLoading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="expandBox">
              <div
                class="expandItem"
                v-for="item in props.row.fileList"
                :key="item.id"
              >
                <div class="expandItemTitle">{{ item.name }}</div>
                <div class="expandItemContent">
                  <ul v-if="item.urlList.length > 0">
                    <li
                      v-for="(img, imgIndex) in item.urlList"
                      :key="img.id"
                      @click="
                        lookImgDetailInfoHandle(
                          props.row,
                          item.urlList,
                          img,
                          imgIndex
                        )
                      "
                    >
                      <img :src="$baseImgUrl + img.img" alt="" />
                    </li>
                  </ul>
                  <div
                    class="uploadAddImg"
                    @click="updateImgDetailInfoHandle(props.row, item)"
                  ></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCate1Name"
          label="商品大类"
        ></el-table-column>
        <el-table-column
          prop="productCate2Name"
          label="商品中类"
        ></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="code" label="商品代码"></el-table-column>
        <el-table-column prop="editor" label="编辑人"></el-table-column>
      <!--  <el-table-column label="商品状态">
          <template slot-scope="scope">
            {{ goodTypeObj[scope.row.state] }}
          </template>
        </el-table-column> -->
        <el-table-column label="录入状态">
          <template slot-scope="scope">
            {{ recordTypeObj[scope.row.recordType] }}
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBox">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="requestData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 查看组件 -->
    <GoodLookImgDetailComponent
      :visible="lookVisible"
      :currentObj="imgObj"
      :lookImgIndex="lookImgIndex"
      @reload="reloadHandle"
      @changeLookDialogvisible="changeLookDialogvisibleHandle"
      @deleteImgData="deleteImgDataHandle"
      @updateImgDataImgData="updateImgDataImgDataHandle"
    />
    <GoodUpLoadImgDetailComponent
      :type="type"
      :parentId="parentId"
      :visible.sync="upLoadVisible"
      :currentObj.sync="uploadParams"
      @reload="reloadHandle"
    />
  </div>
</template>

<script>
import {
  cityOption,
  entryStatusTypeOption,
  storeTypeOption,
  storeStateTypeOption
} from "@/utils/selectConst.js";
import Const from "@/api/Const.js";
import GoodLookImgDetailComponent from "@/components/GoodLookImgDetailComponent.vue";
import GoodUpLoadImgDetailComponent from "@/components/GoodUpLoadImgDetailComponent.vue";
export default {
  name: "goodFileManagement",
  data() {
    return {
      cascaderValue: "",
      type: "新增",
      goodTypeObj: {
        1: "正常",
        2: "下载",
        3: "待下架"
      },
      recordTypeObj: {
        0: "未录入",
        1: "部分录入",
        2: "已录入"
      },
      productCate: [], //商品品类
      lookVisible: false, //查看图片信息
      upLoadVisible: false, //上传图片信息
      parentId: "",
      imgObj: {},
      lookImgIndex: 0,
      lookImgList: 0,
      uploadParams: {},
      total: 0,
      tableLoading: false,
      requestData: {
        recordType: "", //录入状态
        name: "", //门店名称
        code: "", //商品编号
        editor: "", //编辑人
        pageNum: 1,
        size: 10
      },
      tableData: [],
      userCity: localStorage.getItem("city"),
      checkIds: [], //被选中的ids
      cityOption: cityOption,
      entryStatusTypeOption: entryStatusTypeOption,
      storeTypeOption: storeTypeOption,
      storeStateTypeOption: storeStateTypeOption
    };
  },
  created() {
    this.initDataHandle();
    this.loadCityAndArea();
    if(this.$route.query&&this.$route.query.recordType){
      this.requestData.recordType=this.$route.query.recordType
    }
  },
  methods: {
    reloadHandle() {
      this.initDataHandle();
    },
    // 获取商品种类
    loadCityAndArea() {
      this.$axios.get(Const.api.productCurrUserTypeTree, {}).then(res => {
        const { data } = res.data;
        this.productCate = data;
      });
    },
    handleChange(value) {
      this.requestData.productCate1 = value[0];
      this.requestData.productCate2 = value[1];
    },
    initDataHandle() {
      
      this.$axios
        .get(Const.api.query_product_data, {
          params: this.requestData
        })
        .then(res => {
          let { data } = res;
          if (data.code === 0) {
            this.tableData = data.data.list;
            this.total = Number(data.data.total);
          }
        });
    },
    handleSizeChange(val) {
      this.requestData.size = val;
      this.initDataHandle();
    },
    handleCurrentChange(val) {
      this.requestData.pageNum = val;
      this.initDataHandle();
    },
    // 查询
    searchHandle() {
      this.requestData.pageNum = 1;
      this.requestData.pageSize = 10;
      this.initDataHandle();
    },
    resetHandle(formName) {
      this.$refs[formName].resetFields();
      this.cascaderValue = "";
      this.requestData.productCate1 = "";
      this.requestData.productCate2 = "";
      this.requestData.pageNum = 1;
      this.requestData.pageSize = 10;

      this.initDataHandle();
    },
    // 查看文件
    updateImgDetailInfoHandle({ name, id: productId,productCate1Name,productCate2Name }, { id: certificateId }) {
      this.uploadParams = {
        certificateId,
        productId,
        name,
        productCate1Name,
        productCate2Name
      };
      this.upLoadVisible = true;
    },
    // 查看文件
    lookImgDetailInfoHandle({ id, name ,productCate1Name,productCate2Name}, list, img, index) {
      this.imgObj = img;
      this.imgObj.productionName = name;
        this.imgObj.productCate1Name = productCate1Name;
          this.imgObj.productCate2Name = productCate2Name;
      this.lookImgList = list;
      this.lookImgIndex = index;
      this.parentId = img.id;
      this.lookVisible = true;
    },
    // 上传文件
    uploadImgHandle() {},
    changeLookDialogvisibleHandle(val) {
      this.lookVisible = val;
    },
    deleteImgDataHandle(index) {
      if (this.lookImgList.length > 0) {
        this.lookImgList.splice(index, 1);
      }
    },
    // 修改
    updateImgDataImgDataHandle({ data, type }) {
      console.log(data, "data");
      this.lookVisible = false;
      this.upLoadVisible = true;
      this.uploadParams = data;
      this.type = type;
    },
    handleSelectionChange(ids) {
      if (ids.length > 0) {
        this.checkIds = ids.map(item => item.id);
      } else {
        this.checkIds = [];
      }
    },
    // 下载
    batchDownload() {
      if (this.checkIds.length === 0) {
        this.$message.error("请选择需要下载的数据！");
        return false;
      }
      window.open(Const.api.downloadBatchProduct + "?ids=" + this.checkIds);
    }
  },
  components: {
    GoodLookImgDetailComponent,
    GoodUpLoadImgDetailComponent
  }
};
</script>

<style lang="scss" scoped>
.shopCertificateManagement {
  padding: 20px;
  background-color: #fff;
  .tableBox {
    margin-top: 20px;
    .expandBox {
      padding: 20px;
      display: flex;
      align-items: center;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .expandItemTitle {
          margin-bottom: 20px;
          font-size: 16px;
          letter-spacing: 5px;
        }
        .expandItemContent {
          display: flex;
          justify-content: center;
          align-items: center;
          > ul {
            display: flex;
            li {
              margin-right: 20px;
              width: 80px;
              height: 110px;
              list-style: none;
              cursor: pointer;
              > img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .uploadAddImg {
          position: relative;
          width: 80px;
          height: 110px;
          background-color: #e5e5e4;
          cursor: pointer;
          &::after {
            position: absolute;
            left: 50%;
            top: 50%;
            display: inline-block;
            content: "";
            width: 8px;
            height: 80px;
            border-radius: 10px;
            background-color: #fff;
            transform: translate(-50%, -50%);
          }
          &::before {
            position: absolute;
            left: 50%;
            top: 50%;
            display: inline-block;
            content: "";
            width: 60px;
            height: 8px;
            border-radius: 10px;
            background-color: #fff;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .paginationBox {
    margin: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
